<template>
  <div class="home" style="padding: 20px">
    <div>
      <!--功能区-->
      <div style="margin: 10px 0">
        <el-button type="primary" @click="add">新增</el-button>

          <el-upload
                  action="http://localhost:9090/excel/import"
                  :on-success="handleUploadSuccess"
                  :show-file-list=false
                  :limit="1"
                  accept='.xlsx'
                  style="display: inline-block; margin: 0 10px"
          >
              <el-button type="primary">导入</el-button>
          </el-upload>

          <el-button type="primary" @click="exportUser">导出</el-button>

      </div>
      <!--搜索区-->
      <div style="margin: 10px 0; ">
        <el-input v-model="search" placeholder="请输入关键字" clearable style="width: 150px" ></el-input>
          <el-button type="primary" style="margin-left: 5px"  @click="load">查询</el-button>

      </div>
    </div>

    <el-table  :data="tableData"
               border
               stripe
               style="width: 100%; padding-top: 10px">

      <el-table-column prop="id" label="ID" sortable  />
      <el-table-column prop="username" label="用户名"  />
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="address" label="地址" />

        <el-table-column label="角色">
            <template #default="scope">
                <span v-if="scope.row.role === 1">管理员</span>
                <span v-if="scope.row.role === 0">普通用户</span>
            </template>
        </el-table-column>

      <el-table-column fixed="right" label="操作" width="300">
        <template  #default="scope">


            <el-button size="mini" type="success" plain @click="showBooks(scope.row.bookList)">查看图书列表</el-button>
            <el-button  type="primary" size="small" @click="editClick(scope.row)" plain> 编辑 </el-button >
          <!--确认框-->
          <el-popconfirm :title="'你确定要删除' + form.username + '吗?'" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger" @click="showDelete(scope.row.username)" plain>删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

      <el-dialog title="用户拥有的图书列表" v-model="bookVis" width="30%">
          <el-table :data="bookList" stripe border>
              <el-table-column prop="id" label="ID"></el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="price" label="价格"></el-table-column>
          </el-table>
      </el-dialog>

    <div style="margin: 10px 0">
      <el-pagination
              v-model:currentPage="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

    <!--对话框-->
    <el-dialog v-model="dialogVisible" :title="form.id? '修改数据': '添加数据'" width="30%">

      <el-form ref="formRef" :model="form" label-width="120px">
          <el-form-item label="用户名" >
              <el-input v-model="form.username" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="昵称" >
              <el-input v-model="form.nickName" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="年龄" >
              <el-input v-model="form.age" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="性别" >
            <el-radio v-model="form.sex" label="男" size="large"  >男</el-radio>
            <el-radio v-model="form.sex" label="女" size="large"> 女</el-radio>
          </el-form-item>
          <el-form-item label="地址" >
              <el-input type="textarea" v-model="form.username" style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="账户余额">
              <el-input v-model="form.account" style="width: 80%"></el-input>
          </el-form-item>


      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="save" >保存</el-button >
        </span>

      </template>
    </el-dialog>



  </div>
</template>


<script>

  import request from "../utils/request";
  export default {
    name: 'User',
    components: {
        //111

    },
    data() {
      return {
        form:{
          id: 0,
          username: '',
          nickName: '',
          age: null,
          sex: '男',
          address: ''
        },

        dialogVisible: false,

        currentPage: 1,
        total: 50,
        pageSize: null,

        search: '',
        tableData: [],

        //  一对多
        bookList: [],
        //  显示隐藏
        bookVis: false,
      }
    }
    ,

      created() {
        this.load()
      },
    methods: {

        load() {
            request.get("/user", {
                //get不能直接传参数
                params: {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    search: this.search
                }

            }).then(res => {

                this.tableData = res.data.records;
                this.total = res.data.total;
            })
        },

          add() {
            this.from= {}
            this.dialogVisible =true;

          },
        editClick(data) {
            this.form = JSON.parse(JSON.stringify(data))
            this.dialogVisible = true
        },


        save() {
            if (this.form.id) {
                request.put("user", this.form).then(res => {
                    if (res.code === '0') {
                        this.$message.success("更新成功");
                        this.load();
                    } else {
                        this.message.error("更新失败")
                    }
                })
            } else {
                request.post("user", this.form).then(res => {
                    if (res.code === '0') {
                        this.$message.success("添加成功");
                       // this.currentPage = 100
                        this.load();
                    } else {
                        this.message.error("添加失败")
                    }
                })

            }
          request.post("/user", this.form).then(res => {

              this.load()
          })

          this.dialogVisible =false;

        },

      handleSizeChange(size) {
            this.pageSize = size;
            this.load();

      },

      handleCurrentChange(num) {
            this.currentPage = num;
            this.load();

      },

        showDelete(username){
            this.form.username = username;

        },

        handleDelete(id){
            request.delete("user/" + id).then(res => {
                if (res.code === '0') {
                    this.$message.success("删除成功");
                    this.load();
                } else {
                    this.message.error("删除失败")
                }
            })
        },
        //导入成功的回调函数
        exportUser() {
            // location.href = "http://" + window.server.filesUploadUrl + ":9090/excel/export";
            location.href = "http://" + "localhost" + ":9090/excel/export";
        },
        //导出
        handleUploadSuccess(res) {
            if (res.code === "0") {
                this.$message.success("导入成功")
                this.load()
            }
        },
        showBooks(books) {
            this.bookList = books
            this.bookVis = true
        },




    }
  }
</script>
